<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title
      title="各项税费收入"
      time="2"
      timePosition="left"
      dw="单位：亿元"
    ></Title>
    <!-- <div class="echart-tab-wrapper">
      <div class="tabs">
        <div
          class="tab-item"
          v-for="(item,index) in incomeTableList"
          :key="index"
          :class="{'select':incomeTabIndex == index}"
          @click="incomeTabItem(item,index)"
        >{{ item }}</div>
      </div>
    </div>-->
    <div class="content-wrapper">
      <div class="table-wrapper">
        <div class="img-wrapper">
          <img class="image" src="~@/assets/images/icon-12.png" alt />
        </div>
        <div class="title-wrapper">
          <div class="tab-wrapper">
            <div class="tab-item month">本月</div>
            <div class="tab-item all">累计</div>
          </div>
          <div class="table-title">
            <div class="tab-item month">本期</div>
            <div class="tab-item month">同期</div>
            <div class="tab-item month">增减额</div>
            <div class="tab-item month">增减%</div>
            <div class="tab-item all">本期</div>
            <div class="tab-item all">同期</div>
            <div class="tab-item all">增减额</div>
            <div class="tab-item all">增减%</div>
          </div>
        </div>
      </div>
      <div class="table-wrapper content">
        <div class="title-wrapper">
          <div
            class="table-title content"
            v-for="(item, index) in tableBodyArr"
            :key="index"
          >
            <div class="item">{{ textArr[index] }}</div>
            <div class="tab-item" v-text="item.byjebq"></div>
            <div class="tab-item" v-text="item.byjetq"></div>
            <div
              class="tab-item"
              :class="item.byzje > 0 ? 'red' : 'green'"
              v-text="item.byzje"
            ></div>
            <div class="tab-item" :class="item.byzjbfb > 0 ? 'red' : 'green'">
              {{ item.byzjbfb }}%
            </div>
            <div class="tab-item" v-text="item.bnjebq"></div>
            <div class="tab-item" v-text="item.bnjetq"></div>
            <div
              class="tab-item"
              :class="item.bnzje > 0 ? 'red' : 'green'"
              v-text="item.bnzje"
            ></div>
            <div class="tab-item" :class="item.bnzjbfb > 0 ? 'red' : 'green'">
              {{ item.bnzjbfb }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";

export default {
  name: "gxsfsr",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      textArr: [],
      incomeTabIndex: 0,
      incomeTableList: ["实际数", "同口径"],
      tableDataArr: [],
      tableBodyArr: [],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSrcxService/gxsrsrQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.tableDataArr = res.data;
      this.tableBodyArr = res.data.sjsList;
      this.textArr = res.data.sjsList.map((item) => item.xmmc);
    });
  },
  methods: {
    incomeTabItem(item, index) {
      this.incomeTabIndex = index;
      if (item === "实际数") {
        this.tableBodyArr = this.tableDataArr.sjsList;
        this.textArr = this.tableDataArr.sjsList.map((item) => item.xmmc);
      } else if (item === "同口径") {
        this.tableBodyArr = this.tableDataArr.tkjList;
        this.textArr = this.tableDataArr.tkjList.map((item) => item.xmmc);
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
.echarts-outer-wrapper {
  width: 1238px;
  height: 476px;
  .echart-tab-wrapper {
    position: absolute;
    top: 0px;
    right: 140px;
    height: 54px;
  }
  .content-wrapper {
    padding: 0 60px;
    .table-wrapper {
      height: 100px;
      display: flex;
      &.content {
        height: 280px;
        overflow-y: auto;
        @include scrollStyle;
      }
      .img-wrapper {
        flex: 0 0 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        .image {
          width: 150px;
        }
      }
      .title-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        .tab-wrapper {
          height: 36px;
          line-height: 36px;
          color: #ffffff;
          display: flex;
          .tab-item {
            flex: 1;
            text-align: center;
            font-size: 22px;
            color: #ffffff;
          }
          .month {
            background: linear-gradient(0deg, #0bbafb, #4285ec);
          }
          .all {
            background: linear-gradient(180deg, #1c86ba, #71bfbc);
          }
        }
        .table-title {
          height: 64px;
          line-height: 64px;
          display: flex;
          font-size: 20px;

          &.content {
            height: 56px;
            line-height: 56px;
            &:nth-child(2n) {
              background-color: rgba(34, 34, 34, 0.1);
            }
            font-size: 18px;
          }
          .item {
            flex: 0 0 350px;
            line-height: 56px;
            text-align: right;
            padding-right: 40px;
            color: rgba(254, 255, 181, 1);
            font-weight: 700;
          }
          .tab-item {
            flex: 1;
            text-align: center;
            color: #ffffff;
          }
          .all {
            color: rgba(121, 255, 231, 1);
          }
          .red {
            color: rgba(255, 93, 93, 1);
          }
          .green {
            color: rgba(82, 205, 0, 1);
          }
        }
      }
    }
  }
}
</style>
